<!--
 * @Author: YeFei
 * @Date: 2021-11-05 14:42:02
 * @LastEditTime: 2021-11-06 11:52:51
 * @Descripttion: 
-->
<template>
	<a-modal
		:title="handleType === 'add' ? '增加' : '修改'"
		:visible="visible"
		:confirm-loading="confirmLoading"
		@ok="handleOk"
		@cancel="handleCancel"
	>
		<a-form-model ref="userForm" :model="form" :rules="rules" v-bind="layout">
			<a-form-model-item label="姓名" prop="realname" has-feedback>
				<a-input v-model="form.realname" />
			</a-form-model-item>
			<a-form-model-item label="英文名" prop="username" has-feedback>
				<a-input v-model="form.username" />
			</a-form-model-item>
			<a-form-model-item label="性别">
				<a-radio-group v-model="form.sex">
					<a-radio
						v-for="(item, index) in sexList"
						:key="index"
						:value="+index"
					>
						{{ item }}
					</a-radio>
				</a-radio-group>
			</a-form-model-item>

			<!-- <a-form-model-item label="所属市场" prop="market_id">
				<a-select
					allowClear
					v-model.trim="form.market_id"
					style="width: 140px"
					@change="handleMarketChange"
					placeholder="请选择"
				>
					<a-select-option
						v-for="(item, index) in marketData"
						:key="index"
						:value="item.id"
					>
						{{ item.name }}
					</a-select-option>
				</a-select>
			</a-form-model-item> -->

			<a-form-model-item label="邮箱" prop="email" has-feedback>
				<a-input v-model="form.email" />
			</a-form-model-item>
			<a-form-model-item label="手机" prop="mobile" has-feedback>
				<a-input v-model="form.mobile" />
			</a-form-model-item>
			<a-form-model-item label="每周密钥" prop="week_verify" has-feedback>
				<a-input v-model="form.week_verify" />
			</a-form-model-item>

			<a-form-model-item label="角色" prop="role_code" has-feedback>
				<app-select
					v-model="form.role_code"
					:code="$e.role"
					radio
					style="width: 100%"
					@change="(data) => (form.role_name = data.area_name_all)"
				/>
			</a-form-model-item>

			<a-form-model-item label="状态" prop="status" has-feedback>
				<a-select
					v-model="form.status"
					style="width: 120px"
					placeholder="请选择状态"
					@changeStatus="changeStatus(item.key)"
				>
					<a-select-option
						v-for="(item, index) in statusList"
						:key="index"
						:value="item.key"
					>
						{{ item.text }}
					</a-select-option>
				</a-select>
			</a-form-model-item>
			<a-form-model-item label="超级管理员" v-if="admin_role">
				<a-switch
					v-model="form.admin_role"
					checked-children="超级管理员"
					un-checked-children="超级管理员"
				/>
			</a-form-model-item>
		</a-form-model>
	</a-modal>
</template>

<script>
	import User from "@/api/user"
	import salemarket from "@/api/salemarket"
	import { mapState } from "vuex"
	export default {
		data() {
			this.sexList = ["男", "女"]
			this.id = null
			this.handleType = null
			this.statusList = [
				{
					key: 1,
					text: "正常",
				},
				{
					key: 0,
					text: "停用",
				},
				{
					key: -1,
					text: "冻结",
				},
			]
			return {
				title: "增加",
				layout: {
					labelCol: { span: 4 },
					wrapperCol: { span: 14 },
				},
				ModalText: "Content of the modal",
				visible: false,
				confirmLoading: false,
				form: {
					username: "",
					realname: "",
					sex: 0,
					mobile: "",
					email: "",
					week_verify: "",
					status: 1,
					role_code: "",
					role_name: "",
					admin_role: false,
					// market_id: undefined,
				},
				rules: {
					username: [
						{ required: true, trigger: "change", message: "英文名必填" },
					],
					realname: [{ required: true, trigger: "change", message: "姓名必填" }],
					mobile: [{ required: true, trigger: "change", message: "手机必填" }],
					email: [{ required: true, trigger: "change", message: "邮箱必填" }],
					week_verify: [
						{ required: true, trigger: "change", message: "每周密钥必填" },
					],
					status: [{ required: true, trigger: "change", message: "请选择状态" }],
					// market_id: [
					// 	{ required: true, trigger: "change", message: "请选择市场" },
					// ],
				},
				marketData: [],
			}
		},
		watch: {
			visible(newVal) {
				if (newVal == false) this.resetFields()
			},
		},
		computed: {
			...mapState({
				admin_role: (state) => state.admin_role,
			}),
		},
		mounted() {
			console.log(this.admin_role)
		},
		methods: {
			async getMarketList(params = {}) {
				this.marketData = []
				await salemarket.query(params).then((response) => {
					console.log("市场列表数据", response)
					if (response.code !== 1) {
						this.$message.warning(response.message)
						return
					}

					if (response.data && response.data.length > 0) {
						this.marketData = response.data.map((item) => {
							return {
								id: item.id,
								name: item.name,
							}
						})
					}
				})
			},
			// handleMarketChange(market_id) {
			// 	this.form.market_id = market_id
			// },
			changeStatus(value) {
				this.form.status = value
			},

			resetFields() {
				this.form = {
					username: "",
					realname: "",
					sex: 0,
					mobile: "",
					email: "",
					week_verify: "",
					status: undefined,
					role_code: "",
					role_name: "",
					admin_role: false,
					// market_id: undefined,
				}
				this.$refs.userForm.resetFields()
			},

			handleOk() {
				this.handleType === "add" ? this.addUser() : this.updateUser()
			},
			addUser() {
				let _this = this
				_this.$refs.userForm.validate((err, values) => {
					// 验证表单没错误
					if (err) {
						_this.confirmLoading = true
						User.create(_this.form)
							.then((res) => {
								_this.confirmLoading = false
								if (res.code == 1) {
									_this.$message.success("添加成功")
									_this.$emit("handleOk")
									setTimeout(() => {
										_this.visible = false
									}, 500)
								}
							})
							.catch((e) => {
								_this.confirmLoading = false
							})
					}
				})
			},

			updateUser() {
				let _this = this
				_this.$refs.userForm.validate((err, values) => {
					// 验证表单没错误
					if (err) {
						_this.confirmLoading = true
						User.update(this.id, _this.form)
							.then((res) => {
								_this.confirmLoading = false
								if (res.code == 1) {
									_this.$message.success("修改成功")
									_this.$emit("handleOk")
									setTimeout(() => {
										_this.visible = false
									}, 500)
								}
							})
							.catch((e) => {
								_this.confirmLoading = false
							})
					}
				})
			},

			showModal(type, recode) {
				this.handleType = type
				if (type === "update") {
					Object.keys(this.form).forEach((key) => {
						this.form[key] = recode[key]
					})
					this.id = recode.id
				}
				this.visible = true
				this.getMarketList()
			},

			handleCancel(e) {
				this.visible = false
			},
		},
	}
</script>

<style></style>
